<template>
  <div class="main">
    <iframe
      id="rEditIframe"
      class="iframe-panel"
      scrolling="no"
      :src="iframeUrl"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeUrl: "",
    };
  },
  created() {
    this.$nextTick(() => {
      let iframe = document.getElementById("rEditIframe");
      console.log("iframe", iframe);
      const _this = this;
      if (iframe.attachEvent) {
        // IE
        iframe.attachEvent("onload", function () {
          console.log("IE iframe加载完毕！");
          _this.hideHeader(iframe);
        });
      } else {
        // 非IE
        iframe.onload = function () {
          console.log("iframe加载完毕！");
          _this.hideHeader(iframe);
        };
      }
    });
  },
  mounted() {
    this.iframeUrl = process.env.VUE_APP_PYTHONEDIT_URL;
  },
  methods: {
    hideHeader(iframe) {
      let currentDoc = iframe.contentWindow.document || iframe.contentDocument;
      this.$nextTick(() => {
        console.log(
          "currentDoc",
          currentDoc,
          currentDoc.getElementById("header")
        );
        currentDoc.getElementById("header").style.display = "none";
        currentDoc.getElementById("header").style.visibility = "hidden";
        currentDoc.getElementById("header").style.opacity = 0;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  color: #fff;
  .iframe-panel {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    min-height: 675px;
  }
}
</style>
